<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="`/index`">首页</el-breadcrumb-item>
        <el-breadcrumb-item>咨询中心</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>

    <div style="display: grid; grid-template-columns: repeat(4, 22%);   grid-row-gap: 20px;   grid-column-gap: 2%; padding-top: 30px;padding-left: 4%;">
      <div v-for="bidding in biddingList" @click="jumpTo(bidding.id)" :key="bidding.id" class="card">
        <div class="title">{{ bidding.bidTitle }}</div>
        <div class="content" v-html="bidding.bidContent"></div>
        <div class="datetime" v-html="bidding.bidPublishDatetime"></div>
      </div>
    </div>
    <div class="footDiv pcshow">
      <div class="wal">
        <div class="link">
          <a href="/index.html">首页</a><span>|</span>
          <a href="">关于我们</a><span>|</span>
          <a href="">走进医药港</a><span>|</span>
          <a href="">品牌合作</a><span>|</span>
          <a href="">招商中心</a><span>|</span>
          <a href="">资讯中心</a><span>|</span>
          <a href="">加入我们</a><span>|</span>
        </div>
        <div class="msg">Copyright © www.gimp.net.cn All Rights Reserved <a href="http://beian.miit.gov.cn/"
            target="_blank"></a><br><a href="http://www.vancheer.com" target="_blank">Powered by
            vancheer</a></div>
      </div>
    </div>
    <FloatCard style="padding: 0 20px;" v-if="newestBidding" :bid-bidding="newestBidding" @close="newestBidding = undefined"></FloatCard>
  </div>
</template>

<script>
import { listBidding, getNewestBidding } from '@/api/bid/bidding'
import { parseTime } from '@/utils/neu'
import FloatCard from '@/views/bid/FloatCard.vue'

export default {
  name: 'detail',
  components: { FloatCard },
  data() {
    return {
      biddingList: [],
      newestBidding: undefined,
    }
  },
  async mounted() {
    this.biddingList = (await listBidding({ category: this.$route.query.category })).rows
    this.newestBidding = (await getNewestBidding()).data
  },
  methods: {
    parseTime,
    jumpTo(id) {
      this.$router.push(`/bid/detail?id=${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.bread {
    display: flex;
    line-height: 20px;
    padding: 10px 20px 20px;
}
.card {
  background-color: #fff;
  border-radius: 12px;
  transition: 0.4s;

  .title {
    border-radius: 12px 0 0 0;
    opacity: 1;
    background: linear-gradient(90deg, #1AD0B6 0%, rgba(0, 243, 101, 0.801) 100%);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 20px;
    color: #000;
    font-size: 20px;
  }

  .content {
    height: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 20px;
    text-align: left;
    white-space: pre-line;
  }

  .datetime {
    color: #666;
    padding: 20px;
  }
}

.card:hover {
  transform: scale(1.05);
}
.footDiv {
  padding-top: 90px;
  padding-bottom: 25px;
  // background: url(@/assets/images/foot.jpg) no-repeat bottom center;
  background-color: #001500;

  .wal {
    width: 1240px;
    margin: 0px auto;

    .link {
      text-align: center;
      font-size: 14px;
      color: #fff;
      padding-bottom: 25px;

      a {
        color: #fff;
      }

      span {
        padding: 0 20px;
      }
    }

    .msg {
      text-align: center;
      color: #5d6b7a;
      line-height: 2;
      margin-top: 25px;
    }
  }
}
</style>
